.dashboard-stats .upgrades-banner {
  background: var(--tertiary-low);
  flex: 1 1 100%;
  margin-bottom: 2rem;
  padding: 1rem;

  &.upgrade-needed {
    background: var(--danger-low);

    a {
      color: var(--danger);
    }
  }

  a {
    font-weight: bold;
  }
}

.docker-manager {
  h1 {
    margin-top: 1rem;
  }

  .console-logs {
    background-color: var(--secondary-very-high);
    color: var(--primary-900);
    font-family: monospace;
    height: 400px;
    margin-top: 1rem;
    overflow-x: scroll;
    padding: 1rem;
    white-space: pre;
  }

  .check-circle {
    color: var(--success);
  }

  table#repos {
    margin-top: 1rem;

    td:first-child {
      width: 3%;
      padding-left: 8px;
    }

    th {
      border-top: none;
    }

    button {
      padding-left: 15%;
      padding-right: 15%;
    }
  }

  .new-version {
    h4 {
      font-size: 1rem;
      font-weight: bold;
      margin: 0 0 1rem 0;
    }

    ul {
      list-style: none;
      margin: 0 0 1rem 0;
      padding: 0;
    }

    li.new-commits {
      font-style: italic;
    }
  }

  span.commit-hash {
    color: #959595;
  }

  .upgrade-actions {
    display: flex;
    justify-content: space-between;

    button.unlock {
      background-color: var(--danger);
      color: var(--secondary);

      &:hover,
      &:focus {
        background-color: var(--danger-hover);
      }
    }
  }

  #upgrade-all {
    float: right;
  }

  #banner {
    margin: 1rem 0;

    p:first-of-type {
      margin-top: 0;
    }
  }

  .progress-bar {
    background: var(--secondary-very-high);
    height: 1.5rem;
    margin-bottom: 1rem;

    &-inner {
      --stripes: linear-gradient(
        135deg,
        var(--tertiary-400) 25%,
        var(--tertiary-600) 25%,
        var(--tertiary-600) 50%,
        var(--tertiary-400) 50%,
        var(--tertiary-400) 75%,
        var(--tertiary-600) 75%,
        var(--tertiary-600)
      );

      background: var(--tertiary-600);
      background-image: var(--stripes);
      background-size: 2rem 2rem;
      height: 100%;
    }

    &.active .progress-bar-inner {
      animation: progress-bar-stripes 1.5s linear infinite;
      transition: width 0.6s ease;

      @media screen and (prefers-reduced-motion: reduce) {
        animation: none;
        transition: none;
      }
    }

    @keyframes progress-bar-stripes {
      from {
        background-position: 0 0;
      }

      to {
        background-position: 2rem 0;
      }
    }
  }
}
